<template>
  <div class="inputWrapper">
    <input
      :type="type"
      :placeholder="placeholder"
      v-model="inputVal"
      @change="checkValid"
      :class="{
                success: isValid,
                error: !isValid
            }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: "",
      isValid: true,
    };
  },
  // 父传子
  // 2. 子组件声明接收
  props: ["type", "placeholder", "rule", "err_message"],
  // 输入框数据双向绑定了 inputVal
  // 可以监听这个数据, 每当发生了变化, 就去校验正确性
  watch: {
    inputVal(newVal) {
      // 利用正则表达式对数据进行校验

      if (this.rule.test(newVal)) {
        // 我们想根据是否合法的状态, 给input 带上不同的 class
        // 需要将是否合法存放在 data
        this.isValid = true;
        console.log("合法");
      } else {
        this.isValid = false;
        console.log(this.err_message);
      }

      // 每次修改数据, 都应该通知父组件,
      // 随时准备后续的登录请求操作
      this.$emit("valChange", newVal);
    },
  },
  methods: {
    checkValid() {
      // 每当失去焦点时, 如果当前的输入状态还是非法
      // 就应该弹出错误弹窗
      if (!this.isValid) {
        // alert(this.err_message)
        // this.$toast(this.err_message)
        this.$toast.fail(this.err_message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputWrapper {
  input {
    width: 100%;
    border: none;
    outline: none;
    border-bottom: 1px solid #888;
    font-size: 18/360 * 100vw;
    line-height: 50/360 * 100vw;
  }
  .error {
    border-color: red;
  }
}
</style>